<template>
  <el-row>
    <el-col :span="24" class="bc">
      <h5 style="color: #505458; font-family: 'Roboto', sans-serif; margin: 10px 0;">
        用户个人中心
      </h5>
      <div class="bCenter">
        <el-tabs type="border-card" class="nav-bc" v-model="showtable">
          <el-tab-pane label="个人资料" name="first">
            <div class="grid-content bg-purple-light">
              <div class="bcc">
                <el-form :label-position="labelPosition" label-width="80px" :model="user">
                  <el-form-item label="用户名">
                    <el-input v-model="user.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="user.password" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="目标院校">
                    <el-input v-model="user.tschool"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="user.email"></el-input>
                  </el-form-item>
                  <el-form-item label="qq号码">
                    <el-input v-model="user.qq"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <el-input v-model="user.telephone"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="user.sex">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的上传" @click.native="gouqdata" name="second">
            <!-- 上传 -->
            <el-button type="primary" @click="upload">上传</el-button>

            <div class="nav-up">
              <span>Show</span>
              <span style="width: 50px">
                <select name="page" style="width: 50px" class="page">
                  <option value="10">10</option>
                  <option value="15">15</option>
                  <option value="20">20</option>
                  <option value="25">25</option>
                </select>
              </span>
              <span> entries</span>
              <span class="search">Search:
                <input type="text" v-model="keywords" style="height: 25px; width: 200px" />
              </span>
            </div>
            <div>
              <el-table stripe highlight-current-row border :data="search(keywords)" style="width: 100%">
                <el-table-column prop="dname" label="文件名" align="center" width="200">
                </el-table-column>
                <el-table-column prop="dsize" label="文件大小" align="center" width="180">
                </el-table-column>
                <el-table-column prop="ctime" align="center" label="上传时间">
                </el-table-column>
                <el-table-column align="center" label="操作" prop>
                  <template #default="scope">
                    <a :href="`/ky/user/download?dname=${fileDataList[scope.$index].dname}`">下载</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useCookies } from '@vueuse/integrations/useCookies';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElRow, ElCol, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElRadioGroup, ElRadio } from 'element-plus';

const { get } = useCookies(['uid']);
const router = useRouter();
const user = ref({
  id: "",
  username: "",
  password: "",
  tschool: "",
  email: "",
  qq: "",
  telephone: "",
  sex: "男",
  utype: ""
});
const showtable = ref('first');
const fileDataList = ref([]);
const userId = ref(get('uid'));
const labelPosition = ref("right");
const keywords = ref('');

// 用户信息展示
const userdata = async () => {
  try {
    const result = await axios.get(`/ky/user/getOne?id=${userId.value}`);
    user.value = result.data.data;
  } catch (error) {
    console.error('获取用户信息出错:', error);
  }
};

// 触发上传
const gouqdata = async () => {
  try {
    const result = await axios.get(`/ky/user/myfile?id=${userId.value}`);
    fileDataList.value = result.data.data.list;
  } catch (error) {
    console.error('获取上传文件信息出错:', error);
  }
};

// 添加上传
const upload = () => {
  router.push('/upload');
};

// 搜索
const search = (keywords) => {
  return fileDataList.value.filter(item => item.dname.includes(keywords));
};

// 修改用户信息
const submitForm = async () => {
  const sbj = {
    operate: "update",
    userinfo: { ...user.value }
  };
  try {
    const result = await axios.post("/ky/user/doEdit", sbj);
    if (result.data.code === 200) {
      console.log('修改成功');
      await userdata();
    } else {
      console.error('修改失败');
    }
  } catch (error) {
    console.error('修改用户信息出错:', error);
  }
};

onMounted(() => {
  userdata();
  gouqdata();
});
</script>

<style>
textarea {
  resize: none!important;
  height: 100px!important;
}
.bc {
  line-height: 40px;
  text-align: left;
  padding-left: 50px;
  padding-right: 50px;
}
.bcc {
  margin-left: 250px;
  margin-top: 30px;
  width: 80%;
}
.nav-bc {
  background-color: #eeeeee;
}
.page {
  background-color: #eee;
}
.nav-up {
  position: relative;
}
.search {
  position: absolute;
  right: 10px;
}
</style>